<script setup lang="ts">
let marginBool = ref(false)
let margin = computed(() => {
  return marginBool.value ? '20px' : '0px'
})

function gapFn() {
  console.log('点击事件 触发')
  marginBool.value = !marginBool.value
}
</script>

<template>
<div class="wrap">
  <div class="form">
    <label class="toggle" for="gap" @click.stop.capture.prevent="gapFn">
      <span class="toggle__label">margin: 20px</span>
      <input type="checkbox" :checked="marginBool"  role="switch" class="toggle__element" id="gap" />
      <div class="toggle__decor" aria-hidden="true">
        <div class="toggle__thumb"></div>
      </div>
    </label>
  </div>

  <div class="container">
    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=1" alt="">
    </figure>
    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=2" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=3" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=4" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=5" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=5" alt="">
    </figure>

  </div>
</div>
</template>

<style scoped lang="scss">
.wrap  {
  --margin: v-bind(margin);

  --color-primary: #3740ff;
  --color-primary-dark: #272eb5;
  --color-primary-light: #3740ff;
  --color-primary-x-light: #e8f0fe;
  --color-light: #ffffff;
  --color-dark: #202124;
  --color-off-white: #f3f4f4;
  --color-mid: #5f6368;
  --color-mid-dark: #3c4043;
  --color-stroke: #dadce0;
  --metric-gutter: 1.5rem;
  --metric-box-spacing: 1rem;
  --metric-radius: 3px;
  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
  0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  .form {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .toggle {
      --metric-toggle-thumb-size: 1rem;
      --metric-toggle-thumb-space: 0.25rem;
      position: relative;
      display: inline-flex;
      align-items: center;

      &:after {
        content: "\A";
        white-space: pre;
      }

      .toggle__element {
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: var(--metric-toggle-thumb-size);
        width: 1em;
        height: 1em;

        &:checked + .toggle__decor {
          background: var(--color-primary-light);

          .toggle__thumb {
            transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);
          }
        }
      }

      .toggle__decor {
        display: block;
        position: relative;
        overflow: hidden;
        width: calc(
            (var(--metric-toggle-thumb-size) * 2) +
            (var(--metric-toggle-thumb-space) * 2)
        );
        height: calc(
            var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)
        );
        background: var(--color-mid);
        margin-left: 0.5rem;
        border-radius: var(--metric-toggle-thumb-size);
        box-sizing: content-box;
        border: 1px solid var(--color-light);
      }

      .toggle__thumb {
        display: grid;
        place-items: center;
        width: var(--metric-toggle-thumb-size);
        height: var(--metric-toggle-thumb-size);
        border-radius: var(--metric-toggle-thumb-size);
        background: linear-gradient(
                229.84deg,
                rgba(255, 255, 255, 0) 14.29%,
                rgba(48, 48, 48, 0.15) 81.82%
        ),
        #ffffff;
        box-shadow: var(--generic-shadow);
        position: absolute;
        top: var(--metric-toggle-thumb-space);
        left: var(--metric-toggle-thumb-space);
        transform: none;
        transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);
        will-change: transform;
        z-index: 1;

        &::before {
          content: "";
          display: none;
          width: calc(
              var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
          );
          height: calc(
              var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
          );
          border: 1px solid var(--color-primary-light);
          border-radius: calc(
              var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
          );
        }
      }
    }
  }

  .container {
    // 对应width
    inline-size: 800px;
    // 对应height
    block-size: 400px;

    display: grid;
    // 三列 列宽分别为 容器宽度 的 20% 50% 30%
    grid-template-columns: 20% 50% 30%;
    // 两行 行高为 容器高度的 50%
    grid-template-rows: repeat(2, 50%);

    outline: 1px dashed #f36;
    box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
    border-radius: 1px;
    margin-inline: auto;

    .item {
      padding: 0;
      background-color: #f7f7f7;
      border-radius: 2px;
      color: #000;
      padding: 4px;
      margin: var(--margin, 0);

      img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 3px;
        box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.25);
      }

      &:nth-child(1) {
        background-color: #f1c2c6;
      }
      &:nth-child(2n + 1) {
        background-color: #dac2f1;
      }
      &:nth-child(3n + 1) {
        background-color: #ccf1c2;
      }
      &:nth-child(4n + 1) {
        background-color: #c2e9f1;
      }
    }
  }
}
</style>
